<template>
	<view class="pb10">
        <view :class="isFixed?'headerFixed':''">
            <view class="blueBg" :style="{'height':titleTops+'px'}"></view>
            <view class="titleText blueBg" :style="{'height':titleHeight+'px','lineHeight':titleHeight+'px'}">
            	一键下单
            </view>
        </view>
        <view class="bgWhite plr14 ptb13 mt15  radius10 mlr10 bgShadow">
		<view class="justify-between bggray6 cartype" style="background: #f4f6f8;border: none;border-radius: 8rpx;">
		    <image src="/static/images/c4.png" mode="widthFix"></image>
		    <text class="title">发运日期：</text>
		    <view class="justify-between" @click="showChoseTime()">
		        <text v-if="form.time">{{ form.time? formateTime(form.time) :'请选择发运日期'}}</text>
		        <uv-icon size="10" name="arrow-right"></uv-icon>
		    </view>
		</view>
        </view>
        <view class="bgWhite plr14 ptb13 mt15  radius10 mlr10 bgShadow">
          <view class="moduleTitle"> 联系人信息</view>
            <view class="justify-between bggray6 cartype">
                <!-- <text class="send">发</text> -->
                 <text class="title">发货人姓名：</text>
                <input  type="text"  v-model="form.username" placeholder="请填写" />
            </view>
            <view class="justify-between bggray6 cartype">
                <!-- <image src="/static/images/c2.png" mode="widthFix"></image> -->
                 <text class="title">发货人手机号：</text>
                <input  type="text"  v-model="form.phone" placeholder="请填写" />
            </view>
            <view class="justify-between bggray6 cartype">
                <!-- <text class="send" style="background-color:#F24611 ;">收</text> -->
                 <text class="title">收货人姓名：</text>
                <input  type="text" v-model="form.consignee" placeholder="请填写" />
            </view>
            <view class="justify-between bggray6 cartype">
                <!-- <image src="/static/images/c5.png" mode="widthFix"></image> -->
                 <text class="title">收货人手机号：</text>
                <input  type="text" v-model="form.consign_phone" placeholder="请填写" />
            </view>
            
        </view>
        <view class="bgWhite plr14 ptb13 mt15  radius10 mlr10 bgShadow">
            
            <view class="justify-between bggray6" @click="showChoseArea(0)" style="background: #f4f6f8;border: none;border-radius: 8rpx;">
                <text class="send"></text>
                <view class="justify-between" style="line-height: 40rpx;">
                <text style="line-height: 40rpx;">{{form.area_oring ?form.area_oring :"请选择起始地"}}</text>
                <uv-icon size="10" name="arrow-right"></uv-icon>
                </view>
            </view>
            <view class="justify-between bggray6 " @click="showChoseArea(1)" style="background: #f4f6f8;border: none;border-radius: 8rpx;">
                <text class="send" style="background-color:#F24611 ;"></text>
                <view class="justify-between" style="line-height: 40rpx;">
                    <text style="line-height: 40rpx;">{{form.area_dest ?form.area_dest :"请选择目的地"}} </text>
                    <uv-icon size="10" color="#222"  name="arrow-right"></uv-icon>
                </view>
            </view>
        </view>
        <view class="bgWhite plr14 ptb13 mt15  radius10 mlr10 bgShadow">
            <view class="moduleTitle"> 车辆信息板块</view>
            <view class="justify-between mb10 ft16" v-for="(i,n) in carArr" :key="n">
               <view class="itemInfo" v-if="i.chexing">
               	车辆{{n+1}}：{{i.chexing}}
               </view>
               <view class="itemInfo" v-if="i.baozhi">
               	估值：{{i.baozhi}}万元
               </view>
            </view>
            <block v-for="(i,n) in carArr" :key="n">
               <view class="justify-between bggray6 cartype">
                   <image src="/static/images/c1.png" mode="widthFix"></image>
                   <view class="justify-between" @click="showChoseCar(n)">
                       <text>{{i.chexing?i.chexing:"请选择车型" }}</text>
                       <uv-icon size="10" name="arrow-right"></uv-icon>
                   </view>
                   
                   <view class="closeBtn" @click="delCar(n)">
                       <uv-icon  size="24" name="close-circle"></uv-icon>
                   </view>
               </view>
                <view class="justify-between bggray6 cartype">
                    <image src="/static/images/c6.png" mode="widthFix"></image>
                     <text class="title">车辆估值：</text>
                    <input  type="text"  v-model="i.baozhi" placeholder="请填写车辆估值" />
                    <text class="title">万元/台 </text>
                </view>
            </block>
            <view class="addCar justify-center" @click="addCar">
                <uv-icon size="14"  color="#277CC0" name="plus-circle"></uv-icon>
               <text class="mlr5">增加更多车辆</text>  
            </view>
        </view>
        <view class="bgWhite plr14 ptb13 mt15  radius10 mlr10 bgShadow">
            <view class="moduleTitle"> 增值服务</view>
                <view class="justify-between bggray6 cartype ">
                     <text class="title">送车方式</text>
                     <uv-radio-group v-model="form.is_door_val">
                     		<uv-radio :customStyle="{margin: '8px'}" label="上门取车" name="1"></uv-radio>
                     		<uv-radio :customStyle="{margin: '8px'}" label="送至网点" name="2"></uv-radio>
                     </uv-radio-group>
                    <!-- <view class="desc">点击按钮，我们将安排专人上门提车</view> -->
                    <!-- <text style="color:#277CC0 ;margin-left: 6rpx;font-size: 26rpx;">{{form.is_door_val=='1'?"上门取车":'小板提送'}}</text> -->
                    
                    <!-- <uv-switch  activeColor="#277CC0" activeValue="1" inactiveValue="0" @change="changeDoor"   v-model="form.is_door"></uv-switch> -->
                </view>
                <view class="justify-between bggray6 cartype">
                     <text class="title">取车方式</text>
                    <!-- <view class="desc">点击按钮，我们将安排专人送车上门</view> -->
                    <!-- <text style="color:#277CC0 ;margin-left: 6rpx;font-size: 26rpx;">{{form.is_car_val=='1'?"上门送车":'送至网点'}}</text> -->
                    <!-- <uv-switch activeColor="#277CC0" activeValue="1" inactiveValue="0" @change="changeCar"  v-model="form.is_car"></uv-switch> -->
                    <uv-radio-group v-model="form.is_car_val">
                    		<uv-radio :customStyle="{margin: '8px'}" label="送车上门" name="1"></uv-radio>
                    		<uv-radio :customStyle="{margin: '8px'}" label="网点自提" name="2"></uv-radio>
                    </uv-radio-group>
                </view>
        </view>
        <view class="bgWhite plr14 ptb13 mt15  radius10 mlr10 bgShadow">
            <view class="moduleTitle"> 其他信息</view>
                <view class="justify-between bggray6 cartype">
                    <image src="/static/images/c7.png" mode="widthFix"></image>
                    <text class="title">业务对接人：</text>
                    <picker @change="bindPickerChange" style="flex:1" :value="index"  range-key="name" :range="peopleColumn">
                    	<view class="uni-input" v-if="index!=null">{{peopleColumn[index].nickname}}</view>
                        <view class="justify-between" v-else >
                            <text>请选择</text>
                            <uv-icon size="10" name="arrow-right"></uv-icon>
                        </view>
                    </picker>
                    
                </view>
                <view class="justify-between bggray6 cartype">
                    <image src="/static/images/c8.png" mode="widthFix"></image>
                     <text class="title flex1">是否需要开票</text>
                    
                    <uv-switch activeColor="#277CC0" activeValue="1" inactiveValue="0"  v-model="form.invoice_status"></uv-switch>
                </view>
        </view>
        <view class="bgWhite plr14 ptb13 mt15  radius10 mlr10 bgShadow">
            <view class="moduleTitle"> 电子签名</view>
            <view class="upload" v-if="qianming" @click="uploadQm">
                
                <image :src="qianming" mode=""></image>
                
            </view>
              <view v-else class="upload" @click="uploadQm">
                  
                  <text>填写</text>
                  
              </view>
        </view>
        <view @click="submit" class="submit">生成电子合同</view>
        <uv-datetime-picker ref="datetimePicker"  :minDate="minDate" v-model="form.time" mode="date" @confirm="timeConfirm">
        	</uv-datetime-picker>
        <uv-picker ref="picker" :columns="car_brand"  keyName="name" @change="cartypeChange"  @confirm="confirm"></uv-picker>
        <!-- <uv-picker ref="peoplepicker" :columns="peopleColumn" keyName="nickname"  @confirm="peopleconfirm"></uv-picker> -->
       <uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"  @confirm="areaConfirm"></uv-picker>
        <uv-popup ref="CarPopup" round="10" >
            <view class="bdwhite plr13 ptb15 w700">
                    <view class="justify-between">
                        <text class="moduleTitle">送车上门</text>
                        <uv-icon @click="closeCar()" color="#CACACE" name="close-circle" ></uv-icon>
                    </view>
                    <view class=""> 
                        <uv-radio-group v-model="form.is_car_val" customStyle="justify-content:flex-end">
                        		<uv-radio :customStyle="{margin: '8px'}" label="上门送车" name="1"></uv-radio>
                        		<uv-radio :customStyle="{margin: '8px'}" label="送至网点" name="2"></uv-radio>
                        </uv-radio-group>
                    </view>
                <view  @click="closeCar()" class="submit">确定</view>
            </view>
        </uv-popup>
        <uv-popup ref="DoorPopup" round="10">
            <view class="bdwhite plr13 ptb15 w700">
                    <view class="justify-between">
                        <text class="moduleTitle">上门提车</text>
                        <uv-icon @click="closeDoor()" color="#CACACE" name="close-circle" ></uv-icon>
                    </view>
                    <view class=""> 
                        <uv-radio-group v-model="form.is_door_val">
                        		<uv-radio :customStyle="{margin: '8px'}" label="上门取车" name="1"></uv-radio>
                        		<uv-radio :customStyle="{margin: '8px'}" label="小板提送" name="2"></uv-radio>
                        </uv-radio-group>
                    </view>
                <view  @click="closeDoor()" class="submit">确定</view>
            </view>
        </uv-popup>
      <!--  <uv-popup ref="signPop" mode="bottom" round="10">
            <Sign ></Sign>
            
        </uv-popup>  -->  
	</view>
</template>

<script>
// import Sign from '../sign/sign'

	export default {
        components:{
          // Sign  
        },
		data() {
			return {
				titleHeight:'',
				titleTops:'',
                form:{
                    time:Number(new Date()),
                    username:'',
                    phone:"",
                    consignee:'',
                    consign_phone:'',
                    area_oring:'',
                    area_dest:'',
                    yw_user_id:'',
                    is_door:'0',
                    is_door_val:'1',
                    is_car:'0',
                    is_car_val:'1',
                    invoice_status:'0',
                    car_arr:'',
                    qianming:""
                },
                carArr:[
                    {
                        chexing:'',
                        baozhi:'',
                        carName:"",
                        id:'',
                        chejiahao:"", 
                         baofei:"",
                         yunshufei:"",
                          beizhu:"",
                    }
                ],
                car_brand:[ [],[]],
                peopleColumn:[],
                isFixed:false,
                areaRrand:[[],[]],
                columnData:[],
                areatype:0,
                arrvialText:"",
                startText:"",
                carIndex:null,
                AreaData:[],
                carColumnData:[],
                carData:[],
                index:null,
                qianming:"",
                minDate:Number(new Date())
                
			}
		},
        onReady() {
            // #ifdef MP
            uni.getSystemInfo({
            	success: (e) => {
            		this.titleTops = e.statusBarHeight;
            		let custom = uni.getMenuButtonBoundingClientRect();
            		this.titleHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
            	}
            })
            // #endif
            
        	
        },
        onShow() {
         this.getAreaList()
        },
        onLoad() {
          this.getIndex()
             this.getYwPeople('')
             
             let vm =this
             uni.$on('getQiaming', (data) => {
             	console.log(data)
                if(data){
                    vm.qianming=data.fullurl
                    vm.form.qianming=data.url
                }
                
             })
             this.form={
                   time:Number(new Date()),
                   username:'',
                   phone:"",
                   consignee:'',
                   consign_phone:'',
                   area_oring:'',
                   area_dest:'',
                   yw_user_id:'',
                   is_door:'0',
                   is_door_val:'1',
                   is_car:'0',
                   is_car_val:'1',
                   invoice_status:'0',
                   car_arr:'',
                   qianming:""
               }
               this.qianming=''
               this.carArr=[
                       {
                           chexing:'',
                           baozhi:'',
                           carName:"",
                           id:'',
                           chejiahao:"",
                            baofei:"",
                            yunshufei:"",
                             beizhu:"",
                       }
                   ]
             
        },
        onUnload() {
                uni.$off('getQiaming')
        },
        onPageScroll(e) {
            
            if(e.scrollTop>50){
                this.isFixed=true
            }else{
                this.isFixed=false
            }
        },
		methods: {
            sub(){
             
            },
            uploadQm(){
                // this.$refs.signPop.open()
                   uni.navigateTo({
                        url:'/pages/sign/sign'
                    })
            },
            carChange(e){
                
                    const { columnIndex , index} = e
                	if (columnIndex === 0) {
                		this.$refs.areaPicker.setColumnValues(1, this.columnData[index])
                	}
            },
            bindPickerChange(e){
              console.log(e)  
              this.index = Number(e.detail.value)
              this.form.yw_user_id= this.peopleColumn[this.index].id
            },
          
            async  getAreaList(){
                let data =await this.$api.getAreaList()
                this.AreaData = data.data
                data.data.map((item,n)=>{
                    this.areaRrand[0].push({
                        name:item.name,
                        id:item.id
                    })
                    let arr= []
                    item.child.map(i=>{
                        arr.push(i.name)
                        if(n==0){
                            if(arr.length==item.child.length){
                                    this.areaRrand[1]=arr
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }else{
                            if(arr.length==item.child.length){
                                    this.columnData.push(arr)
                                    arr= []
                            }
                        }
                    })
                })
                
                
            },
            showChoseArea(type){
                    this.areatype= type
                    this.$refs.areaPicker.open()
            },
            areaConfirm(e){
                    if(this.areatype==0){
                        this.form.area_oring =e.value[1]
                        let focus={}
                        this.AreaData.map(item=>{
                         item.child.map(i=>{
                             if(i.name==e.value[1]){
                                 focus=i
                             }
                         })
                        })
                        if(focus){
                        }
                    }else{
                        this.form.area_dest = e.value[1]
                         
                    }
            },
            changeDoor(e){
                    if(e==1){
                        this.$refs.DoorPopup.open()
                    }
            },
            changeCar(e){
                if(e==1){
                    this.$refs.CarPopup.open()
                }
            },
            closeDoor(){
                this.$refs.DoorPopup.close()
            },
            closeCar(){
                this.$refs.CarPopup.close()
            },
            addCar(){
                    let obj = {
                        chexing:'',
                        baozhi:'',
                        carName:'',
                        id:'',
                        chejiahao:"",
                         baofei:"",
                         yunshufei:"",
                          beizhu:"",
                    }
                    this.carArr.push(obj)
            },
            delCar(n){
              this.carArr.splice(n,1)  
            },
            showChoseCar(n){
                    this.carIndex= n
                	this.$refs.picker.open();
            },
            showPeoplePop(){
                this.$refs.peoplepicker.open();
            },
            peopleconfirm(e){
                console.log(e)
            },
            async getIndex(){
                let data =await this.$api.getIndex()
                this.carData =  data.data.car_brand
                data.data.car_brand.map((item,n)=>{
                    this.car_brand[0].push({
                        name:item.name,
                        id:item.id
                    })
                    let arr= []
                    item.car_type.map(i=>{
                        arr.push(i.name)
                        if(n==0){
                            if(arr.length==item.car_type.length){
                                    this.car_brand[1]=arr
                                    this.carColumnData.push(arr)
                                    arr= []
                            }
                        }else{
                            if(arr.length==item.car_type.length){
                                    this.carColumnData.push(arr)
                                    arr= []
                            }
                        }
                    })
                    // item.chexing.map(i=>{
                    //     this.car_brand[1].push({
                    //         name:i.name,
                    //         id:i.id
                    //     })
                    // })
                })
            },
            async getYwPeople(id){
                this.peopleColumn=[]
                let data =await this.$api.getYwRW({areaid:id})
                data.data.map(item=>{
                     this.peopleColumn.push({
                         ...{
                             name: item.nickname+'-'+item.mobile
                         },
                         ...item
                         
                     })
                })
                // this.peopleColumn = data.data
                
             
            },
            cartypeChange(e){
                const { columnIndex , index} = e
                if (columnIndex === 0) {
                	this.$refs.picker.setColumnValues(1, this.carColumnData[index])
                }
            },
            confirm(e){
                 this.carArr[this.carIndex].chexing = e.value[0].name+'-'+   e.value[1]
                   
                   let focus={}
                   // this.carData.map(item=>{
                   //  item.chexing.map(i=>{
                   //      if(i.name==e.value[1]){
                   //          focus=i
                   //      }
                   //  })
                   // })
                   // if(focus){
                   //     this.carArr[this.carIndex].id =focus.id
                   // }
                   
                        
            },
            formateTime(data){
                let time = this.$utils.formatDateTime(data)
                return  time
            },
            timeConfirm(e){
                
            },
                showChoseTime(){
                  this.$refs.datetimePicker.open();  
                },
                
            submit(){
             if(!this.form.username)  return uni.showToast({
                 title:'请输入发货人姓名',
                 icon:'none'
             })
             if(!this.$utils.checkStr(this.form.phone ,'mobile')) return uni.showToast({
                 title:'请输入正确的发货人电话',
                 icon:'none'
             })
             if(!this.form.consignee)  return uni.showToast({
                 title:'请输入收货人姓名',
                 icon:'none'
             })
             if(!this.$utils.checkStr(this.form.consign_phone ,'mobile')) return uni.showToast({
                 title:'请输入正确的收货人电话',
                 icon:'none'
             })
             if(!this.form.area_oring)  return uni.showToast({
                 title:'请选择出发地',
                 icon:'none'
             })
             if(!this.form.area_dest)  return uni.showToast({
                 title:'请选择目的地',
                 icon:'none'
             })
             if(!this.form.yw_user_id)  return uni.showToast({
                 title:'请选择业务对接人',
                 icon:'none'
             })
             if(!this.form.qianming)  return uni.showToast({
                 title:'请上传签名',
                 icon:'none'
             })
             let arr= []
              this.carArr.map(item=>{
                  arr.push({
                    chexing:item.chexing,
                    baozhi:item.baozhi,
                    chejiahao:"",
                     baofei:"",
                     yunshufei:"",
                      beizhu:"",
                  })
              })
              this.form.time = Number((this.form.time/1000).toFixed(0))
              this.form.car_arr =JSON.stringify(arr) 
               
                this.$api.createorder(this.form).then(res=>{
                    if(res.code==1){
                        uni.showToast({
                            title:'下单成功'
                        })
                       uni.switchTab({
                           url:'/pages/tabbar/myOrder'
                       })
                    }else{
                        uni.showToast({
                            title:res.msg,
                            icon:'none'
                        })
                    }
                })  
            
            }    
		}
	}
</script>

<style scoped lang="scss">
.bggray6{
        border-radius: 5rpx;
        align-items: center;
        flex: 1;
        padding: 0 24rpx 0;
        height: 88rpx;
        // background: #F4F6F8;
        border-bottom: 1rpx solid #ECECEC;
        
        // background-color: #F4F6F8;
        font-size: 32rpx;
        line-height: 88rpx;
        
        color:#555;
        .send{
            width: 12rpx;
            height: 12rpx;
            
            color: #fff;
            text-align: center;
            
            background: #277CC0;
            border-radius: 50%;
            
            margin-right: 11rpx;
        }
        .title{
            font-size: 30rpx;
            color: #333333;
        }
      view{
          flex: 1;
      }      
       margin-bottom: 14rpx;
    }
    .right{
        margin-left: 17rpx;
    }
    .cartype{
        position: relative;
        image{
            width: 34rpx;
            margin-right: 11rpx;
        }
        view{
            flex: 1;
        }
        input{
            flex: 1;
            font-size: 28rpx;
        }
    }
        
    .closeBtn{
            position: absolute;
            top: -10rpx;
            right: -10rpx;
    }
    .addCar{
        height: 88rpx;
         line-height: 88rpx;
        background: #F4F6F8;
        border-radius: 8rpx;
        font-size: 28rpx;
        color: #666;
        text{
            margin-left: 6rpx;
        }
    }
    .moduleTitle{
    
        font-family: Source Han Sans CN;
        font-weight: 800;
        font-size: 32rpx;
        color: #333333;
        position: relative;
        margin-bottom: 20rpx;
        
    }
    .moduleTitle::before{
        width: 6rpx;
        height: 36rpx;
        background-color: #277CC0;
        position: absolute;
        left: -28rpx;
        clear: both;
        content: '';
        top: 0;
        margin: auto;
        bottom: 0;
    }
    .desc{
        font-size: 14rpx;
        color: #888;
        
        margin-left: 10rpx;
    }
    .submit{
        background-color: #277CC0;
        border-radius: 50rpx;
        height: 95rpx;
        line-height: 95rpx;
        color: #fff;
        display: flex;
        font-size: 32rpx;
        margin: 30rpx 20rpx 0;
        justify-content: center;
        align-items: center;
    }
    .headerFixed{
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 9999;
    }
        
    .upload{
        width: 140rpx;
            height: 140rpx;
            border: 1px solid #e2e2e2;
            border-radius: 10rpx;
            text-align: center;
            line-height: 140rpx;
            color: #999;
    }
    .upload image{
            width: 140rpx;
                height: 140rpx;
                border-radius: 10rpx;
    }
</style>
